<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../Scripts/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Scripts/laypage/laypage.js"></script>
<title>Insert title here</title>

<style type="text/css">
	#box{
		margin-left: auto;
		margin-right: auto;
		padding:50px;
		border: solid 3px gray; 
	}
</style>


</head>
<body>
行政管理> 会议室管理
<hr>
 <div id="box" style="width:60%" >
<div class="form-group">
    <label for="exampleInputEmail1">预定时间段:</label>
   <input class="Wdate" type="text" id="startTime" placeholder="请输入起始时间" onClick="WdatePicker({skin:'twoer',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2100-03-10 20:59:30'})">&nbsp;&nbsp;至&nbsp;&nbsp;<input class="Wdate" id="endTime" placeholder="请输入结束时间" type="text" onClick="WdatePicker({skin:'twoer',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2100-03-10 20:59:30'})">
</div>
 <button type="button" class="btn btn-default" v-on:click="seachApply()">搜索</button>
 <hr>
 可预订会议室查询结果:

 	<table  class="table table-condensed" >
				<thead >
				<tr >
					<td>选择</td>
					<td>会议室名称</td>
					<td>会议室描述</td>
				</tr>
					<tr v-for="list in uselist" class="success">
						<td><input type="radio" name="radio" id="radio" value="{{list.cid}}"/></td>
						<td>{{list.cname}}</td>
						<td>{{list.cdescribe}}</td>
					</tr>
				</thead>
	</table>
	<div id="conferencePage"></div>
	<div class="form-group">
    <label for="exampleInputEmail1">会议室预订人:</label>
    </div>
    <div class="form-group">
    <label for="exampleInputPassword1">会议类型:</label>
    	<select id="atype">
    		<option value="" selected="selected" id="atype">请选择会客模式</option>
    		<option value="会议">会议</option>
    		<option value="培训">培训</option>
    		<option value="面试">面试</option>
    		<option value="会客">会客</option>
    		<option value="其他">其他</option>
    	</select>
  </div>
   <!-- Button trigger modal -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">预定</button>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">提示信息</h4>
      </div>
      <div class="modal-body">
       		 确认申请吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary"  v-on:click="applySubmit()">确定</button>
      </div>
    </div>
  </div>
</div>
 </div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			uselist:'',
			curr:'1',
		},
		methods:{
			applySubmit:function(){
				
				var start=$("#startTime").val();
				var end=$("#endTime").val();
				var cid=$("#radio").val();
				var atype=$("#atype").val();
				
				$('#myModal').modal('hide');
				
				
				$.ajax({
					url:'../insertApplyConference',
					type:'post',
					data:{startTime:start,endTime:end,cname:cid,atype:atype},
					dataType:'text',
					success:function(res){
						if(res!="false"){
							alert("申请成功");
						}else{
							alert("申请失败")
						}
						window.location.reload();
					}
				})
			},
			seachApply:function(){
				var start=$("#startTime").val();
				var end=$("#endTime").val();
				var dom = this;
				var currentPage=this.curr;
				alert(currentPage)
				$.ajax({
					url:'../selectUseApplyConference',
					type:'post',
					data:{startTime:start,endTime:end,currentPage:currentPage},
					dataType:'json',
					success:function(res){
						dom.uselist=res.useApplyConference
						laypage({
							cont : $("#conferencePage"),//容器
							pages:res.pages,//总页数
							curr : currentPage, //当前页
							skin : 'molv',//皮肤
							//skip : true,//支持跳转的功能
							last : '尾页',
							groups : 3,//多少页进行分组
							jump : function(obj, first) {//触发分页后回调
								if (!first) {//一定要加此判定，否则初始时会无限刷新
									dom.curr=(obj.curr)
									dom.seachApply();
									

								}

							}

						})
						
						
						
					}
				})
			}
		},
		
		created:function(){
			
			this.seachApply();
		}
		
	})
</script>
</html>